<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>DatePicker 日期选择器</title>
</head>
<body>
	<div id="app">
		<h3>默认</h3>
		<el-date-picker v-model="value01" type="date" placeholder="选择日期"> </el-date-picker>
		<div>{{value01}}</div>

		<h3>选择日期范围</h3>
		<!-- 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。 -->
		<el-date-picker v-model="value02" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
		<div>{{value02}}</div>

	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			data : function() {
				return {
					value01 : '',
					value02 : []
				}
			},
			methods : {}
		})
	</script>
</body>
</html>